{extend name="public/common"}

{block name="style"}
<title>考勤情况</title>
<link rel="stylesheet" href="/home/css/attendance/record.css?v={$Think.config.version}">
{/block}

{block name="body"}
<div id="app" v-cloak>
    <div class="time-select">
        <div class="time" @click="chooseTime">
            <img src="/home/images/attendance/time.png" />
            <p>{{time | timeToString('ymd')}} {{time | timeToWeekday}}</p>
            <i class="fa fa-angle-down"></i>
        </div>
        <mt-datetime-picker
                v-model="tempTime"
                type="date"
                ref="timePicker"
                year-format="{value} 年"
                month-format="{value} 月"
                date-format="{value} 日"
                :end-date="nowTime"
                @confirm="timeConfirm">
        </mt-datetime-picker>
        <div class="count">
            <span>总人数：{{list.count.total}}人</span>
            <p>
                <span class="work">出勤:{{list.count.status_1}}</span>
                <span class="outing">公出:{{list.count.status_2}}</span>
                <span class="rest">休息:{{list.count.status_0}}</span>
            </p>
        </div>
    </div>
    <div class="body">
        <div class="box" v-for="i,k in list.department" v-if="i.user.length > 0">
            <p>{{i.name}}</p>
            <div>
                <div v-for="item,j in i.user" :class="item.status>0?item.status==1?'name-box work':'name-box outing':'name-box rest'">{{item.username}}
                    <span v-if="(j+1)/3 > 1 && (j+1)%3 == 1" class="line"></span>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=c4a19790a696719015fd55887476dc3b"></script>
<script>
    console.log({$list})
    //时间戳转换
    Vue.filter('timeToWeekday', function (time) {
        if (time) {
            var week = ['周一','周二','周三','周四','周五','周六','周日'],
                weekday = new Date(time * 1000).getDay();
            return week[weekday-1];
        }
    });
    var vw = new Vue({
        el: "#app",
        data: {
            status:['出勤','公出','休息'],
            list:{$list},
            time: new Date().getTime() / 1000,
            nowTime: new Date(new Date().getTime()+24*3600*1000),
            tempTime: new Date()
        },
        methods: {
            chooseTime() {
                this.$refs.timePicker.open();
            },
            timeConfirm(val) {
                var _this = this;
                _this.tempTime = val;
                _this.time = new Date(this.tempTime).getTime() / 1000;
                _this.$indicator.open({
                    text: '查询中，请稍后',
                    spinnerType: 'triple-bounce'
                });
                _this.$http.post('{:Url("Attendance/record")}',{
                    time:_this.time,
                    is_punch:0
                },{emulateJSON:true}).then(function (res) {
                    var data = res.body;
                    _this.$indicator.close();
                    if(data.code == 1) {
                        _this.list = data.data
                    }
                    console.log(data)
                }, function (res) {
                    _this.$indicator.close();
                    _this.$toast({
                        message: "查找失败，请重试！",
                        duration: 1500
                    });
                });
            }
        }
    })
</script>
{/block}
